<template>
  <div>
    <div v-if="!edit">
      <Checkbox :checked="checkValue===true" disabled/>
    </div>
    <vswitch v-else
            :key="field.name"
            v-model="checkValue"
            @change="onchange(checkValue)"
    ></vswitch>
  </div>
</template>

<script>
  import gql from 'graphql-tag'
  import {Checkbox, Switch} from "vant"

  export default {
    name: 'FieldBoolean', components: {vswitch:Switch, Checkbox},
    props: {
      field: {
        type: Object,
        default() {
          return {}
        }
      },

      model: {type: String, default: ''},
      id: {type: Number, default: 0},
      edit: {type: Boolean, defautl: false}
    }, inject: ['value'],
    data() {
      return {checkValue: this.value.cval}
    },
    mounted: function () {
    },
    computed: {
      writeDict() {
        let v = {}
        v[this.field.name] = this.checkValue
        return v
      }
    },
    methods: {
      onchange(val) {
        this.$apollo.mutate({
          mutation: gql`mutation($id:Int!,$model:String!,$value:JSON!){
            writeRecord(id:$id,model:$model,value:$value){
              ok
            }
          }`,
          variables: {id: this.id, model: this.model, value: this.writeDict}
        }).then(function (response) {
          if (response && response.data.writeRecord.ok) {
            // self.app_root.toast(response.result.errMsg)
            // self.$router ? self.$router.back() : window.history.back()
          } else if (response && !response.data.writeRecord.ok) {
            // self.app_root.toast(response.result.errMsg)
          }
        })
          .catch(function (error) {
            console.log(error, __filename)
          })
      }

    }

  }
</script>

<style scoped>

</style>
